تضمين فيديو يوتيوب في صفحة ويب مع خاصية Lazyload و عرض متجاوب

معلومات 3 سبتمبر، 2022

تضمين فيديو يوتيوب مع Lazyload and Responsive – أفضل الطرق لتضمين فيديو YouTube على مواقع الويب والمدونات و WordPress و blogger.

كيفية تضمين مقطع فيديو YouTube في صفحة ويب باستخدام Lazyload و Responsive View

في مقال اليوم ، سنتعلم كيفية تضمين مقطع فيديو على YouTube مع ميزة Lazy Load في صفحة الويب أ ، ونشر المدونة بشكل صحيح وعرض سريع الاستجابة على جميع الشاشات (How to properly embed a YouTube Video with Lazyload and Responsive) بطرق وأشكال مختلفة أنه من خلال تطبيق أحدها ، سنتمكن من تضمين مقاطع فيديو YouTube في صفحات الويب بوظيفة التحميل البطيء للتأكد من أن مقطع فيديو YouTube المضمن لا يؤثر على سرعة تحميل صفحة الويب.

تعرف على كيفية تضمين مقطع فيديو YouTube بشكل تفاعلي في صفحات موقع الويب الخاص بك أو منشورات المدونة باستخدام Lazy Loading أو Lazy Loading باستخدام JavaScript.

إذا لم تكن قد لاحظت بعد وقمت فقط بتضمين مقطع فيديو YouTube مفيد تجده على موقع الويب الخاص بك أو صفحات المدونة ، فعادة ما تقوم بتضمين مقطع فيديو YouTube ، على سبيل المثال:

<iframe width="560" height="315" src="https://www.youtube.com/embed/tyZuZRyriDg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

والذي يضيف تلقائيًا حجمًا إضافيًا إلى صفحة موقعك نظرًا لأن نص YouTube يبلغ 625.4 كيلوبايت . سيؤدي هذا في حد ذاته إلى زيادة سرعة تحميل الصفحة لموقعك إذا كنت تعلم أن حجم صفحة الويب المثالي للتحميل السريع هو 1 ميغا بايت (1024 كيلو بايت). لذلك ، إذا كنت تبحث عن طريقة لتحسين سرعة تصفح صفحات الويب الخاصة بك باستخدام مقاطع فيديو YouTube المضمنة ، فيجب عليك بالتأكيد استخدام Lazyload.

للتأكد من أهمية تثبيت ميزة lazyload لمقاطع فيديو YouTube المضمنة ، قمت بإنشاء صفحتين على الويب بهما نفس المحتوى على مدونة web.dev blogger ، وكانت النتائج كما هو موضح في الصور أدناه – أدناه. (لا حظ مع الفارق)

لترى بنفسك رابط الصفحتين في الصورة أعلاه كما يلي:

الصفحة الأولى بدون Lazyload.

الصفحة الثانية مع Lazyload

لذلك ، في هذه المقالة ، سنعرض لك طريقتين لحل مشكلتك ، عن طريق تأخير تحميل مكتبات جافا سكريبت على YouTube حتى يقوم المستخدم بالتمرير لأسفل ويظهر الفيديو أمام المستخدم ، أي في نافذة العرض الخاصة بـ شاشة.

أفضل الطرق لتضمين مقاطع فيديو YouTube على صفحات الويب – LazyLoad YouTube Responsive

ملاحظة: الطريقتان أدناه ستعرضان الفيديو من موقع يوتيوب على صفحتك بعرض كامل وبطريقة مميزة وسريعة الاستجابة بجميع أحجام الشاشات سواء كانت شاشات كبيرة أو على شاشة الجوال.

الطريقة الأولى: التحميل البطيء Lazyload مع IntersectionObserver API

لفهم ما سنفعله بهذه الطريقة مع IntersectionObserver API ، ضع في اعتبارك المثال التالي لصفحة ويب قابلة للتمرير رأسياً تحتوي على مقطع فيديو YouTube واحد:

كيفية تضمين فيديو يوتيوب في صفحة ويب مع خاصية Lazyload و عرض متجاوب

في هذه الحالة ، إذا قمت بتضمين الفيديو كما تفعل عادةً عن طريق إدخال رمز التضمين المقدم من YouTube ، فإن رمز iframe في YouTube سيضيف على الفور 625.4 كيلوبايت إلى حجم صفحتك ، حتى إذا كان الفيديو غير مرئي للمستخدم في الشاشة نافذة او شباك. أو لم تظهر بعد في مجال رؤية المتصفح. سيؤدي تحسين سرعة تحميل صفحات موقعك إلى مشكلة كارثية وهو أمر مروع حقًا. لذا فإن الحل لإزالة 625.4 كيلوبايت غير مطلوب حتى الآن هو تأخير تحميله حتى يصبح مرئيًا في منفذ العرض (باستخدام LazyLoad ، لن يتم تحميل YouTube JavaScript على الفور):

سيتم تحميله فقط عندما تكون حاوية الفيديو أو الصورة في منفذ عرض شاشة المتصفح ، وسيتم تحميل 625.4 كيلوبايت لإظهار فيديو YouTube للمستخدم الآن:

الآن دعني أوضح لك كيفية تحميل فيديو YouTube مضمن على النحو الأمثل باستخدام Lazyload باستخدام JavaScript.

لتطبيق هذه الطريقة لمشاهدة فيديو YouTube ، قم بتنفيذ الخطوتين أدناه.

فيما يلي خطوات تنفيذ وتطبيق الطريقة الأولى

قم بتثبيت مكتبة VanillaLazyLoad JavaScript

من أجل تنفيذ الطريقة الأولى وتمكين LazyLoading ، سنستخدم مكتبة LazyLoad الفانيليا JavaScript. إنها شفرة JavaScript جاهزة وخفيفة الوزن وصغيرة الحجم (2.4 كيلوبايت) ومرنة وكاملة ، أي أنها ستسرع موقع الويب الخاص بك بالكامل أو من مدونتك عن طريق تأجيل تحميل الصور ومقاطع الفيديو وإطارات iframes حتى تظهر في نافذة المستخدم. . تمت كتابة المكتبة بلغة Vanilla JavaScript ، والتي تستند إلى واجهة برمجة تطبيقات IntersectionObserver ، وتدعم عرض الصور سريع الاستجابة ، وتحسن سرعة تحميل مدونتك أو موقع الويب الخاص بك لمستخدمي الإنترنت البطيئين ، ويمكنها أيضًا تمكين التحميل البطيء الأصلي.

إذا كنت تستخدم NPM لإدارة الحزم ، فقم بتشغيل الأمر التالي:

npm install vanilla-lazyload

إذا كان موقعك يعمل على WordPress أو Blogger أو أي نظام أساسي آخر لإدارة المحتوى ، فيمكنك تثبيت Vanilla LazyLoad عن طريق نسخ ولصق الكود التالي فوق علامة إغلاق الهيدر</head> في موقعك:

<script
  async
  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@latest/dist/lazyload.min.js"
></script>

يبلغ حجم مكتبة Vanilla Lazyload 7.34 كيلوبايت فقط ، لذا فهي بالتأكيد خيار رائع لمواقع الويب أو المدونة الخاصة بك مقارنة بـ 625.4 كيلوبايت التي يمكن أن يضيفها مقطع فيديو واحد على YouTube. لمزيد من المعلومات حول هذه المكتبة ، يرجى زيارة مستودع المكتبة الرسمي على Github.

قم بتحرير كود تضمين فيديو YouTube عن طريق إضافة class = “lazy”

الآن كل ما نحتاج إلى القيام به هو نسخ كود تضمين الفيديو الذي نريده من يوتيوب، مع إضافة class=”lazy” إلى علامة الفريم <iframe>وتغيير السمة src إلى data-src حتى لا يتم تحميل الإطار تلقائيًا. أيضا قم بتضمين سكربت JavaScript لتهيئة التحميل البطيء بشكل عام كما هو موضح بالكود التالي:

<!-- Embedded YouTube video Markup with the lazy class -->
<iframe
    class="lazy" 
    data-src="https://www.youtube.com/embed/tyZuZRyriDg" 
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
>
</iframe>
<script>
// Set the options globally
// to make LazyLoad self-initialize
window.lazyLoadOptions = {
    // Your custom settings go here
};

// Listen to the initialization event
// and get the instance of LazyLoad
window.addEventListener("LazyLoad::Initialized", function (event) {
    window.lazyLoadInstance = event.detail.instance;
}, false);
</script>

بهذه الطريقة ، سيتم عرض مقطع فيديو YouTube وتنزيله فقط عندما يظهر في نافذة العرض على شاشة المستخدم ، أي عندما يقوم المستخدم بالتمرير إلى المنطقة التي يوجد بها الفيديو على صفحة الويب.

إلى هنا نكون قد انتهينا من تطبيق الطريقة الأولى، وأصبح بإمكاننا إدراج فيديوهات اليوتيوب على موقعنا أو مدونتنا مع خاصية التحميل البطيء من خلال تعديل فقط كود التضمين لفيديو يوتيوب بإضافة class="lazy" إلى علامة الفريك <iframe> وتغيير السمة src إلى data-src كما وضحنا في الخطوة الثانية أعلاه.

ولكن في حالة كنت تود أو يكون ظهور الإطار بنفس عرض صفحة الويب أو موقعك ويكون متجاوب على جميع شاشات العرض كشاشة الجوال فقم تنفيذ الخطوة الثالثة .. وهي كالتالي:

3. تمكين العرض المتجاوب لفريم فيديو يوتيوب المضمن

أولا، قم بإضافة كود CSS التالي لكود الإستايل الخاص بموقعك، أي قبل علامة الإغلاق :

.youtube-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.youtube-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 5px;
}

ثانيا، الآن قم بتضمين كود فيديو اليوتيوب المُعدّل (كما هو موضح في الخطوة الثانية أعلاه) داخل الوسم <div class="youtube-responsive"></div> ، ليصبح كود التضمين النهائي كالتالي:

<div class="youtube-responsive">
<iframe
    class="lazy" 
    data-src="https://www.youtube.com/embed/tyZuZRyriDg" 
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
>
</iframe>
<script>
window.lazyLoadOptions = {
};

window.addEventListener("LazyLoad::Initialized", function (event) {
    window.lazyLoadInstance = event.detail.instance;
}, false);
</script>
  </div>

يمكنك مشاهدة مثال حي للطريقة الأولى وتنفيذ الخطوات الثلاث المذكورة أعلاه على موقع Codepen الإلكتروني ، ويتضمن المثال كود تضمين HTML وشفرة CSS وجافا سكريبت (انقر هنا للوصول إلى صفحة التطبيق الخاصة بالطريقة الأولى على موقع Codepen)

الطريقة الثانية: تحميل بطيء مع خيار بدء التشغيل اليدوي

باستخدام هذه الطريقة الثانية ، يعد تضمين فيديو YouTube مع ترك القدرة على تنزيل ومشاهدة الفيديو للمستخدم أو متصفح موقعك مثاليًا لأولئك الذين لا يستطيعون الاعتماد على الطريقة الأولى LazyLoading عبر IntersectionObserver. قد يكون ذلك بسبب اضطرارهم إلى تضمين مقاطع فيديو من YouTube في بداية صفحة الويب ، أي في الجزء العلوي من الصفحة (وهو الجزء الأول من الصفحة الذي يظهر للمستخدم) ، وفي هذه الحالة ، مقطع فيديو YouTube المضمن سيظهر مباشرة في الجزء الأول من نافذة العرض لشاشة المستخدم أو الزائر عند دخول الصفحة. سيؤدي ذلك إلى تعطيل التحميل البطيء وتحميل الفيديو مباشرة وزيادة حجم صفحة الويب ، وفي هذه الحالة ، الطريقة 1 أعلاه لا تعمل. لذلك سيكون عليك تنفيذ هذه الطريقة الثانية. وهو في هذه الحالة هو الخيار الأفضل لك ولموقعك.

بهذه الطريقة ، سيتم عرض الصورة المصغرة للفيديو الذي تريد تضمينه بدلاً من الفيديو ، أي سيتم عرض الفيديو المضمن كصورة مع زر التشغيل في المنتصف ، وعندما يرغب المستخدم في تشغيل الفيديو ، سينقر المستخدم فقط على الصورة ثم يتم تنزيل فيديو YouTube مباشرة وتشغيله على الفور على نفس الصفحة.

قد تكون عملية تنفيذ هذه الطريقة أطول قليلاً وأكثر صعوبة بالنسبة للمبتدئين ، ومع ذلك ، فإن تنفيذها وفائدتها يستحقان العناء ، مقارنةً بـ 625.4 كيلوبايت لصفحة موقعك الخاصة بالفيديو المضمن إذا لم تقم بتنفيذ أي من الطريقتين ، باستخدام بهذه الطريقة ، يمكنك فقط إضافة حجم الصورة المصغرة (والذي يمكن أن يكون حوالي 15 كيلو بايت فقط). فلنبدأ بشرح هذه الطريقة!

فيما يلي خطوات تنفيذ وتطبيق الطريقة الثانية .. 👇

إنشاء رمز تضمين فيديو يوتيوب

في هذه الطريقة ، ستكون شفرة التضمين الخاصة بإدراج الفيديو في صفحات موقعك مختلفة تمامًا عما اعتدت عليه عند تضمين مقطع فيديو من YouTube.

ستحتاج إلى معرفة معرف الفيديو ، والذي يظهر عادةً في نهاية رابط فيديو YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/tyZuZRyriDg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

سيكون معرف الفيديو أو معرف الفيديو هو الجزء المظلل من الكود أعلاه ، وهو tyZuZRyriDg.

الآن بعد أن عرفت معرف الفيديو الذي تريد عرضه وتضمينه على صفحة الويب ، سيكون كود التضمين كما يلي:

<!-- 1. حاوية فيديو اليوتيوب -->
<div class="embed-youtube" data-video-id="4XxGS7aqRtg"> 
    <!-- 2. الأيقونة التي ستظهر كأيقونة التسغيل -->
    <div class="embed-youtube-play"></div>
</div>

كما ترى ، سيتم إدراج معرّف الفيديو في سمة data-video-id الخاصة برمز التضمين ، والذي سنقوم باستدعائه عبر كود JavaScript (الموضح في الخطوة 3) الذي سيجلب الفيديو ويضمّنه من YouTube.

إضافة رموز CSS

الآن دعنا نضيف بعض كود CSS لتحسين مظهر إطار معاينة الفيديو بحيث يظهر على موقعنا أو صفحة المدونة بطريقة جميلة وجذابة للمستخدم أو المتصفح للنقر عليه لتشغيل ومشاهدة الفيديو المضمن من اليوتيوب :

.embed-youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.embed-youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
    width: 68px;
    height: 48px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
    cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.embed-youtube .embed-youtube-play:hover {
    background-color: #f00;
}

كود CSS أعلاه ، سيحافظ على نسبة عرض إلى ارتفاع تبلغ 16: 9 ، وهي النسبة المئوية المحددة التي يظهر فيها كل مقطع فيديو على YouTube ، كما سيعرض أيضًا رمز تشغيل في منتصف الصورة المصغرة ليوضح للمستخدم أنه فيديو يمكن تشغيله وليس صورة ثابتة بحيث يمكن للمستخدم التفاعل معها.

أضف كود JavaScript

الآن ، في الخطوة الأخيرة ، سنضيف كود JavaScript الذي من خلاله سنقوم تلقائيًا باستدعاء الصورة المصغرة للفيديو. سيضيف أيضًا مستمعًا لحدث النقر (انقر فوق مستمع الحدث) والذي سيؤدي إلى تشغيل صورة فيديو YouTube وتضمينها مباشرةً عندما ينقر المستخدم على الصورة أو يتنقل فيها أو زر التشغيل لتشغيل الفيديو على نفس الصفحة.

يتم إدخال شفرة JavaScript التالية داخل كود الموقع أو المدونة ، قبل علامة الإغلاق</body> :

(function(){
    let YouTubeContainers = document.querySelectorAll(".embed-youtube");

    // Iterate over every YouTube container you may have
    for (let i = 0; i < YouTubeContainers.length; i++) {
        let container = YouTubeContainers[i];
        let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 

        // Load the Thumbnail Image asynchronously
        let image = new Image();
        image.src = imageSource;
        image.addEventListener("load", function() {
            container.appendChild(image);
        });

        // When the user clicks on the container, load the embedded YouTube video
        container.addEventListener("click", function() {
            let iframe = document.createElement( "iframe" );

            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "");
            iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
            // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 
            iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");

            // Clear Thumbnail and load the YouTube iframe
            this.innerHTML = "";
            this.appendChild( iframe );
        });
    }
})();

تطبيق الطريقة الثانية بأسلوب آخر وبكود واحد فقط

يوجد خيار اخر لتطبيق الطريقة الثانية بسهولة تامة ومن خلال كود واحد لتضمين فيديو من اليوتيوب عن طريق عرض الصورة المصغرة للفيديو والتي ستظهر بكامل عرضها ومناسبة لجميع احجام الشاشات اضغط على الصورة والفيديو سيتم تنزيلها وتشغيلها مباشرة.

الكود هو كالتالي:



<div class="youtube-responsive">
<iframe
src="https://www.youtube.com/embed/tyZuZRyriDg&autoplay=1"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}
</style><a href=https://www.youtube.com/embed/tyZuZRyriDg?autoplay=1><img src=https://img.youtube.com/vi/tyZuZRyriDg/maxresdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▷</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe></div>
<style>.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:1em auto}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:5px}
</style>

إقرأ أيضا:

نصائح لتحسين مقالات مدونتك لمحركات البحث

إزالة ?m=1 من روابط مدونات بلوجر لتحسين محركات البحث

اضافة أزرار التحميل و المعاينة الى مدونة بلوجر بشكل احترافي

معلومات 3 سبتمبر، 2022